<template>
  <div class="physical-exercise">
    <div class="content-wrapper">
              <!-- 顶部选项卡 - 全部/男生/女生 -->
              <div class="tab-container">
                <div class="tabs">
                  <div
                    v-for="tab in genderTabs"
                    :key="tab.value"
                    class="tab-item"
                    :class="{ active: currentGenderTab === tab.value }"
                    @click="handleGenderTabChange(tab.value)"
                  >
                    {{ tab.label }}
                  </div>
                </div>
              </div>

              <!-- 项目选择 - 引体/三千米 -->
              <div class="project-selector">
                <div class="project-tabs">
                  <div
                    v-for="project in projectTabs"
                    :key="project.value"
                    class="project-tab-item"
                    :class="{ active: currentProjectTab === project.value }"
                    @click="handleProjectTabChange(project.value)"
                  >
                    {{ project.label }}
                  </div>
                </div>
              </div>

              <!-- 搜索栏 -->
              <div class="search-bar">
                <el-input
                  v-model="searchName"
                  placeholder="请输入姓名"
                  prefix-icon="el-icon-search"
                  clearable
                  @clear="handleSearch"
                  @input="handleSearch"
                  class="search-input"
                ></el-input>
                <el-input
                  v-model="searchClass"
                  placeholder="请输入班级"
                  prefix-icon="el-icon-school"
                  clearable
                  @clear="handleSearch"
                  @input="handleSearch"
                  class="search-input"
                ></el-input>
              </div>

              <!-- 数据表格 -->
              <div class="data-table-container">
                <el-table
                  v-loading="loading"
                  :data="filteredData"
                  style="width: 100%"
                  :header-cell-style="{
                    fontSize: '16px',
                    backgroundColor: '#0f1325',
                    color: '#68d8fe',
                    borderColor: '#68d8fe'
                  }"
                  :cell-style="{ borderColor: '#68d8fe' }"
                  :row-class-name="tableRowClassName"
                  border
                  class="custom-table"
                >
                  <el-table-column prop="姓名" label="姓名" width="230" align="center"></el-table-column>
                  <el-table-column prop="班级" label="班级" width="210" align="center"></el-table-column>
                  <el-table-column prop="性别" label="性别" width="210" align="center"></el-table-column>
                  <el-table-column prop="成绩" label="项目成绩" width="250" align="center">
                    <template slot-scope="scope">
                      {{ formatScore(scope.row['成绩'], currentProjectTab) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="排名" label="排名" width="230" align="center">
                    <template slot-scope="scope">
                      {{ scope.row['排名'] }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="是否及格" label="是否及格" width="200" align="center">
                    <template slot-scope="scope">
                      <span :class="{
                        'pass-status': scope.row['是否及格'] === '及格',
                        'fail-status': scope.row['是否及格'] === '不及格',
                        'not-participated': scope.row['是否及格'] === '未参加'
                      }">
                        {{ scope.row['是否及格'] }}
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin"

export default {
  mixins: [drawMixin],
  name: 'PhysicalExercise',
  data() {
    return {
      loading: false,
      sportData: [],
      searchName: '', // 姓名搜索
      searchClass: '', // 班级搜索
      currentGenderTab: 'all', // 'all', 'male', 'female'
      currentProjectTab: 'pullup', // 'pullup', '3km'
      genderTabs: [
        { label: '全部', value: 'all' },
        { label: '男生', value: 'male' },
        { label: '女生', value: 'female' }
      ],
      projectTabs: [
        { label: '引体', value: 'pullup' },
        { label: '三千米', value: '3km' }
      ],
      passStandards: {
        male: {
          pullup: 11, // 男生引体向上及格标准：11个
          '3km': 13 * 60 + 45// 男生3千米及格标准：13分钟（转换为秒）
        },
        female: {
          pullup: 5, // 女生引体向上及格标准：5个
          '3km': 16 * 60 + 5 // 女生3千米及格标准：15分钟（转换为秒）
        }
      }
    }
  },
  computed: {
    filteredData() {
      if (!this.sportData || !this.sportData.length) return [];

      console.log('过滤前的数据:', this.sportData);

      // 根据性别筛选
      let filteredByGender = this.sportData;
      if (this.currentGenderTab === 'male') {
        filteredByGender = this.sportData.filter(item => item['性别'] === '男');
      } else if (this.currentGenderTab === 'female') {
        filteredByGender = this.sportData.filter(item => item['性别'] === '女');
      }

      console.log('按性别过滤后:', filteredByGender.length);

      // 根据项目筛选
      let result = filteredByGender.filter(item => {
        if (this.currentProjectTab === 'pullup') {
          return item['项目'] === '引体向上' || item['项目'] === '引体';
        } else {
          return item['项目'] === '3000米' || item['项目'] === '三千米';
        }
      });

      // 根据姓名搜索
      if (this.searchName.trim()) {
        result = result.filter(item => item['姓名'].includes(this.searchName.trim()));
      }

      // 根据班级搜索
      if (this.searchClass.trim()) {
        const searchClassTrimmed = this.searchClass.trim();
        result = result.filter(item => {
          // 将班级转为字符串进行比较，以防班级是数字类型
          const classStr = String(item['班级']);

          // 精确匹配班级数字，避免“1班”和“10班”混淆
          if (searchClassTrimmed.match(/^\d+$/)) {
            // 如果搜索条件是纯数字，则进行精确匹配
            const classNum = classStr.match(/\d+/);
            if (classNum) {
              // 如果班级包含数字，则判断数字是否相等
              return classNum[0] === searchClassTrimmed;
            }
            return false;
          } else {
            // 如果搜索条件不是纯数字，则使用包含关系进行模糊匹配
            return classStr.includes(searchClassTrimmed);
          }
        });
      }

      console.log('按项目过滤后:', result.length);

      // 分离特殊情况和正常成绩的数据
      const specialCases = result.filter(item => typeof item['成绩'] === 'string' && isNaN(Number(item['成绩'])));
      const normalScores = result.filter(item => typeof item['成绩'] !== 'string' || !isNaN(Number(item['成绩'])));

      // 确保正常成绩是数字类型
      const processedNormalScores = normalScores.map(item => {
        const newItem = { ...item };
        if (typeof newItem['成绩'] === 'string') {
          newItem['成绩'] = Number(newItem['成绩']) || 0;
        }
        return newItem;
      });

      // 根据成绩排序（只对正常成绩排序）
      processedNormalScores.sort((a, b) => {
        if (this.currentProjectTab === 'pullup') {
          // 引体向上成绩从高到低
          return b['成绩'] - a['成绩'];
        } else {
          // 3千米成绩从低到高（时间越短越好）
          return a['成绩'] - b['成绩'];
        }
      });

      // 计算排名（只对正常成绩计算排名）
      processedNormalScores.forEach((item, index) => {
        item['排名'] = index + 1;
      });

      // 计算是否及格（只对正常成绩计算是否及格）
      processedNormalScores.forEach(item => {
        const gender = item['性别'] === '男' ? 'male' : 'female';
        const standard = this.passStandards[gender][this.currentProjectTab];

        if (this.currentProjectTab === 'pullup') {
          // 引体向上成绩越高越好，高于标准则及格
          item['是否及格'] = item['成绩'] >= standard ? '及格' : '不及格';
        } else {
          // 3千米成绩越低越好（时间越短越好），低于标准则及格
          item['是否及格'] = item['成绩'] <= standard ? '及格' : '不及格';
        }
      });

      // 特殊情况的排名设为'-'
      specialCases.forEach(item => {
        item['排名'] = '-';
      });

      // 合并特殊情况和正常成绩的数据
      result = [...processedNormalScores, ...specialCases];

      console.log('最终过滤结果:', result.length);
      return result;
    }
  },
  methods: {
    // 处理性别选项卡变化
    handleGenderTabChange(tab) {
      this.currentGenderTab = tab;
    },

    // 处理项目选项卡变化
    handleProjectTabChange(tab) {
      this.currentProjectTab = tab;
    },

    // 处理搜索
    handleSearch() {
      // 搜索逻辑已在计算属性中实现
      console.log('搜索条件:', { 姓名: this.searchName, 班级: this.searchClass });
    },

    // 格式化成绩显示
    formatScore(score, projectType) {
      // 如果成绩是字符串类型，直接返回该字符串（如病假、请假等）
      if (typeof score === 'string') {
        return score;
      }

      if (!score && score !== 0) return '-';

      if (projectType === 'pullup') {
        // 引体向上成绩显示为个数
        return `${score} 个`;
      } else {
        // 3千米成绩显示为分钟::秒格式
        if (score <= 0) return '-';

        const minutes = Math.floor(score / 60);
        const seconds = Math.floor(score % 60);
        return `${minutes}分${seconds.toString().padStart(2, '0')}秒`;
      }
    },

    // 设置表格行样式
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'even-row';
      } else {
        return 'odd-row';
      }
    },

    // 读取数据
    async fetchSportData() {
      this.loading = true;
      try {
        // 读取CSV文件
        console.log('开始读取CSV文件');
        const response = await fetch('/data/sport.csv');
        const csvText = await response.text();

        // 解析CSV数据
        const rows = csvText.split('\n');
        const headers = rows[0].split(',');
        console.log('表头:', headers);

        // 处理数据
        const sportData = [];

        // 处理引体向上数据
        for (let i = 1; i < rows.length; i++) {
          if (!rows[i].trim()) continue; // 跳过空行

          const values = rows[i].split(',');
          if (values.length < headers.length) continue; // 跳过不完整的行

          // 创建引体向上数据项
          if (values[4]) {
            const pullupItem = {
              '姓名': values[1],
              '班级': values[3],
              '性别': values[2],
              '项目': '引体向上'
            };

            // 处理特殊情况（病假、请假等）
            if (values[4] === '病假' || values[4] === '请假' || values[4] === '未参加' || values[4] === '未完成' || values[4] === 'gs' ||
                values[4] === '课代表' || values[4] === '记录成绩' || values[4] === '陪家长' || values[4] === '摄影保障' || values[4] === '事假') {
              pullupItem['成绩'] = values[4];
              pullupItem['是否及格'] = '未参加';
            } else {
              // 正常数字成绩
              pullupItem['成绩'] = isNaN(Number(values[4])) ? 0 : Number(values[4]);
              pullupItem['是否及格'] = values[5] === '是' ? '及格' : '不及格';
            }

            sportData.push(pullupItem);
          }

          // 创建3000米数据项
          if (values[6]) {
            const runningItem = {
              '姓名': values[1],
              '班级': values[3],
              '性别': values[2],
              '项目': '3000米'
            };

            // 处理特殊情况（病假、请假等）
            if (values[6] === '病假' || values[6] === '请假' || values[6] === '未参加' || values[6] === '未完成' || values[6] === 'gs' ||
                values[6] === '课代表' || values[6] === '记录成绩' || values[6] === '陪家长' || values[6] === '摄影保障' || values[6] === '事假') {
              runningItem['成绩'] = values[6];
              runningItem['是否及格'] = '未参加';
            } else {
              let runningScore = 0;

              // 处理时间格式
              const timeStr = values[6].trim();

              if (timeStr.includes(':')) {
                // 如果是分钟:秒格式
                const [minutes, seconds] = timeStr.split(':').map(Number);
                runningScore = minutes * 60 + seconds;
              } else if (timeStr.includes('.')) {
                // 如果是分钟.秒格式
                const [minutes, seconds] = timeStr.split('.').map(Number);
                runningScore = minutes * 60 + seconds;
              } else {
                // 其他格式尝试直接转换
                runningScore = Number(timeStr) || 0;
              }

              // 确保成绩是有效的数字
              if (isNaN(runningScore)) {
                runningScore = 0;
              }

              runningItem['成绩'] = runningScore;
              runningItem['是否及格'] = values[7] === '是' ? '及格' : '不及格';
            }

            sportData.push(runningItem);
          }
        }

        console.log('处理后的CSV数据长度:', sportData.length);
        if (sportData.length > 0) {
          console.log('处理后的CSV数据第一项:', sportData[0]);
          this.sportData = sportData;
        } else {
          // 如果CSV数据处理失败，尝试加载样例数据
          console.warn('没有有效的CSV数据，尝试加载样例数据');
          const jsonResponse = await fetch('/data/sample-sport.json');
          const jsonData = await jsonResponse.json();
          this.sportData = jsonData;
        }

        this.loading = false;
      } catch (error) {
        console.error('数据加载失败:', error);
        this.loading = false;

        try {
          // 如果CSV文件加载失败，尝试加载样例数据
          console.warn('回退到样例数据');
          const response = await fetch('/data/sample-sport.json');
          const jsonData = await response.json();
          this.sportData = jsonData;
          this.loading = false;
        } catch (fallbackError) {
          console.error('加载样例数据失败:', fallbackError);
          this.$message.error('加载数据失败，请检查文件是否存在');
        }
      }
    }
  },
  created() {
    this.fetchSportData();
  },
  mounted() {
    // 触发重新计算大屏缩放比例
    setTimeout(() => {
      this.calcRate();
    }, 100);
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/common.scss';

.physical-exercise {
  height: 100%;
  width: 100%;

  .content-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;

    .tab-container {
      margin-bottom: 20px;

      .tabs {
        display: flex;
        border-bottom: 1px solid rgba(104, 216, 254, 0.3);

        .tab-item {
          padding: 10px 20px;
          cursor: pointer;
          color: #d3d6dd;
          font-size: 16px;
          transition: all 0.3s;

          &.active {
            color: #68d8fe;
            border-bottom: 2px solid #68d8fe;
          }

          &:hover {
            color: #68d8fe;
          }
        }
      }
    }

    .project-selector {
      margin-bottom: 20px;

      .project-tabs {
        display: flex;

        .project-tab-item {
          padding: 8px 16px;
          margin-right: 10px;
          cursor: pointer;
          color: #d3d6dd;
          font-size: 14px;
          border: 1px solid rgba(104, 216, 254, 0.3);
          border-radius: 4px;
          transition: all 0.3s;

          &.active {
            color: #68d8fe;
            background-color: rgba(104, 216, 254, 0.1);
            border-color: #68d8fe;
          }

          &:hover {
            color: #68d8fe;
            border-color: #68d8fe;
          }
        }
      }
    }

    .search-bar {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
      background-color: rgba(19, 25, 47, 0.6);
      padding: 15px;
      border-radius: 4px;
      border: 1px solid rgba(104, 216, 254, 0.2);

      .search-input {
        width: 200px;

        ::v-deep .el-input__inner {
          background-color: rgba(15, 19, 37, 0.8);
          border: 1px solid rgba(104, 216, 254, 0.3);
          color: #fff;
          height: 36px;
        }

        ::v-deep .el-input__icon {
          color: rgba(104, 216, 254, 0.8);
        }
      }
    }

    .data-table-container {
      flex: 1;
      overflow: hidden; /* 改为hidden，让内部表格滚动 */
      height: calc(100% - 120px);
      position: relative;
      max-height: 600px; /* 设置最大高度，确保在内容过多时可以滚动 */

      .custom-table {
        background-color: transparent;
        color: #d3d6dd;
        height: 100%; /* 确保表格占满容器高度 */

        ::v-deep .el-table__header-wrapper th {
          background-color: #0f1325;
          color: #68d8fe;
          font-weight: bold;
          position: sticky;
          top: 0;
          z-index: 10;
        }

        ::v-deep .el-table__body-wrapper {
          overflow-y: auto;
          max-height: 550px; /* 设置表格体的最大高度 */
          scrollbar-width: thin; /* 细滚动条（Firefox） */
        }

        /* 自定义滚动条样式（Chrome和Safari） */
        ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }

        ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
          background: rgba(104, 216, 254, 0.5);
          border-radius: 3px;
        }

        ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
          background: rgba(0, 0, 0, 0.1);
          border-radius: 3px;
        }

        ::v-deep .el-table__body-wrapper tr {
          background-color: transparent;

          &.even-row {
            background-color: #0f1325;
          }

          &.odd-row {
            background-color: #171c33;
          }

          &:hover > td {
            background-color: rgba(45, 50, 62, 0.7) !important;
          }
        }

        ::v-deep .el-table__row td {
          color: #d3d6dd;
        }

        .pass-status {
          color: #19be6b;
        }

        .fail-status {
          color: #ed3f14;
        }

        .not-participated {
          color: #ff9900;
        }
      }
    }
  }
}
</style>
